<template>
	<view class="shop" v-if="isLoad">
		<view class="shop-swiper">
			<shopBanner :detail="shopInfo" :isShare="isShare" :isShow="isShow" />
		</view>
		<view>
			<view class="pd-lg fill-base flex-between rel">
				<view>
					<view class="f-sm-title text-bold c-black">{{shopInfo.name}}</view>
					<view class="pt-md c-warning" style="line-height: 1;">
						<text class="f-icontext">￥</text>
						<text class="f-sm-title text-bold">{{shopInfo.price}}</text>
					</view>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<view class="" style="width: 400rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;">
					<!-- <view class="list_bt_sm" @click="clickCollect">
						<image src="/static/zxc/start.png" mode="widthFix" style="width: 45rpx;"></image>
						<text v-if="shopInfo.is_collect == 0" style="font-size: 36rpx;">收藏</text>
						<text v-if="shopInfo.is_collect == 1" style="font-size: 36rpx;">取消收藏</text>
					</view> -->
					<view class="list_bt_sm" @click="clickCollect">
					<image :src="shopInfo.is_collect == 0?notC:isC" mode="" style="width: 55rpx;height: 55rpx;"></image>
					<text class="c-caption" style="font-size: 36rpx;">收藏</text>
					</view>
					<button class="flex-center" open-type="share" style="justify-content: unset;">
						<view class="iconfenxiang iconfont" style="font-size: 56rpx;" :style="{color:primaryColor}">
						</view>
						<text class="c-caption" style="padding-left: 6rpx;font-size: 36rpx;">分享</text>
					</button>
				</view>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view class="flex-center share-btn abs" @tap.stop="toAppShare">
					<view class="iconfenxiang iconfont" style="font-size: 42rpx;" :style="{color:primaryColor}"></view>
					<text class="f-icontext c-caption" style="padding-left: 6rpx;">分享</text>
				</view>
				<!-- #endif -->
			</view>
			<view class="mt-md fill-base pl-lg pr-lg">
				<view class="f-mini-title c-black shop-box-title">商品详情</view>
				<view class="fill-base pt-lg pb-lg">
					<parser :html="shopInfo.desc" @linkpress="linkpress" show-with-animation lazy-load>加载中...</parser>
				</view>
				<!-- <rich-text :nodes="shopInfo.desc"></rich-text> -->
			</view>
		</view>
		<view class="space-max-footer"></view>
		<view class="btnBox">
			<view class="edite">
				<auth @tap.stop.prevent :needAuth="userInfo && (!userInfo.phone || !userInfo.nickName)" :must="true"
					:type="!userInfo.phone ? 'phone' : 'userInfo'" @go="tianjia" style="width: 100%;">
				<view class="tinajia">
					添加购物车
				</view>
				</auth>
				<auth @tap.stop.prevent :needAuth="userInfo && (!userInfo.phone || !userInfo.nickName)" :must="true"
					:type="!userInfo.phone ? 'phone' : 'userInfo'" @go="goumai(shopInfo.id)" style="width: 100%;">
				<view class="queren">
					购买商品
				</view>
				</auth>
			</view>
		</view>
		<!-- <fix-bottom-button @confirm="$util.goUrl({url:`/user/pages/shopOrder?id=${shopInfo.id}`})"
			:text="[{type:'confirm',text:'购买商品'}]" bgColor="#fff">
		</fix-bottom-button> -->
		<auth @tap.stop.prevent :needAuth="userInfo && (!userInfo.phone || !userInfo.nickName)" :must="true"
			:type="!userInfo.phone ? 'phone' : 'userInfo'" @go="toC">
		<view class="card">
			<image src="../../static/img/1.png" mode="aspectFill"></image>
		</view>
		</auth>
		<u-popup :show="editeShow" @close="quxiao" mode="center" :round="10">
			<view class="" style="width: 80vw;
    padding: 16rpx 32rpx;">
				<view class="eTitle">
					添加购物车
				</view>
				<view class="" style="display: flex;justify-content: space-between;align-items: center;padding: 30rpx;">
					<view class="font28">
						数量
					</view>
					<view class="caozuo">
						<view class="jian" @click="jian">
							<u-icon name="minus" color="#2979ff" size="12"></u-icon>
						</view>
						<view class="input font28">{{num}}</view>
						<view class="jia" @click="jia">
							<u-icon name="plus" color="#2979ff" size="12"></u-icon>
						</view>
					</view>
				</view>
				<view class="bBOX">
					<view class="quxiao" @click="quxiao">
						取消
					</view>
					<view class="queren" @click="queren(shopInfo.id)">
						确认
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import parser from "@/components/jyf-Parser/index"
	import shopBanner from "@/components/shop-banner"
	import siteInfo from '@/siteinfo.js';
	export default {
		components: {
			parser,
			shopBanner
		},
		data() {
			return {
				isShow:true,
				isLoad: false,
				options: {},
				shopInfo: {},
				isShare: false,
				num: 0,
				editeShow: false,
				isC: '../../static/images/c1.png',
				notC: '../../static/images/c2.png',
				userInfo:{}
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			isGzhLogin: state => state.user.isGzhLogin,
		}),
		onLoad(options) {
			if (options.pid) {
				this.isShare = true
			}
			this.getuserInfo()
			this.options = options
			this.initIndex()
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh()
			uni.stopPullDownRefresh()
		},
		onShareAppMessage() {
			let {
				id,
				name: title,
				cover: imageUrl
			} = this.shopInfo
			let path = `/technician/pages/shop/detail?id=${id}&pid=${this.userInfo.id}`
			return {
				title,
				imageUrl,
				path
			}
		},
		methods: {
			...mapActions(['getConfigInfo', 'getUserInfo']),
			initRefresh() {
				this.initIndex(true)
			},
			async getuserInfo() {
				var res = await this.$api.mine.index()
				this.userInfo = res
			},
			tianjia() {
				if (this.editeShow) return
				this.editeShow = true
			},
			jian() {
				if (this.num == 0) {
					uni.showToast({
						icon: "error",
						title: "已经是最小值了"
					})
				}
				if (this.num > 0) {
					this.num = this.num - 1
				}
			},
			jia() {
				this.num = this.num + 1
			},
			quxiao() {
				this.editeShow = false
				this.num = 0
			},
			toC() {
				this.editeShow = false
				this.num = 0
				uni.navigateTo({
					url: '/zxcadd/shop/cart'
				})
			},
			async queren(id) {
				if (this.num == 0) {
					uni.showToast({
						icon: "error",
						title: "请增加数量"
					})
					return
				}
				const data = await this.$api.zxcadd.addShopGoodsCar({
					goods_id: id,
					num: this.num
				})
				uni.showToast({
					icon: "success",
					title: data
				})
				this.editeShow = false
			},
			goumai(id) {
				if (this.shopInfo.can_buy == 0) {
					uni.showToast({
						icon: "error",
						title: '无权限联系客服',
						duration: 1000
					})
					return
				}
				if (this.editeShow) return
				uni.navigateTo({
					url: '/user/pages/shopOrder?id=' + id
				})
			},
			async initIndex(refresh = false) {
				let {
					pid = 0
				} = this.options
				let {
					isGzhLogin
				} = this
				let {
					id: uid = 0
				} = this.userInfo
				if (pid && !uid) {
					// #ifdef H5
					if (isGzhLogin) {
						setTimeout(() => {
							this.getUserInfo()
						}, 1000)
					} else {
						this.getUserInfo()
					}
					// #endif
					// #ifndef H5
					await this.getUserInfo()
					// #endif 
				}

				if (!this.configInfo.id || refresh) {
					await this.getConfigInfo()
				}
				await this.goodsInfoCall()
				// #ifdef H5
				if (this.$jweixin.isWechat()) {
					await this.$jweixin.initJssdk();
					setTimeout(() => {
						this.toAppShare()
					}, 1200)
				}
				// #endif
			},
			async goodsInfoCall() {
				this.$util.showLoading()
				let {
					id
				} = this.options
				this.shopInfo = await this.$api.technician.goodsInfo({
					id
				})
				this.isLoad = true
				this.$util.hideAll()
			},
			swiperChange(e) {},
			linkpress(res) {
				// #ifdef APP-PLUS
				if (/http/.test(res.href))
					this.$util.goUrl({
						url: res.href,
						openType: 'web'
					})
				// #endif
			},
			toAppShare() {
				let {
					id: pid = 0
				} = this.userInfo
				let {
					id,
					name: title,
					cover: imageUrl
				} = this.shopInfo
				let summary = ''
				let {
					siteroot
				} = siteInfo
				let url = siteroot.split('/index.php')[0]
				let href = `${url}/h5/#/technician/pages/shop/detail?id=${id}&pid=${pid}`

				// #ifdef H5
				this.$jweixin.wxReady(() => {
					this.$jweixin.showOptionMenu()
					this.$jweixin.shareAppMessage(title, summary, href, imageUrl)
					this.$jweixin.shareTimelineMessage(title, href, imageUrl)
				})
				// #endif
				// #ifdef APP-PLUS
				uni.share({
					provider: "weixin",
					scene: 'WXSceneSession',
					type: 0,
					href,
					title,
					summary,
					imageUrl,
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
				// #endif
			},
			async clickCollect() {
				var info = await this.$api.zxcadd.articleCollect({
					article_id: this.options.id,
					type: 3
				});
				this.$util.showToast({
					title: info,
				})
				if (this.shopInfo.is_collect == 1) {
					this.shopInfo.is_collect = 0
					return
				}
				if (this.shopInfo.is_collect == 0) {
					this.shopInfo.is_collect = 1
					return
				}
			}
		}
	}
</script>

<style lang="scss">
	.shop {
		.shop-swiper {
			height: 400rpx;
		}

		.shop-box-title {
			line-height: 110rpx;
			height: 110rpx;
		}

		.shop-box-item {
			width: 100%;
			height: 388rpx;

			image {
				vertical-align: bottom;
				width: 100%;
				height: 100%;
			}
		}

		.share-btn {
			right: 30rpx;
			bottom: 30rpx;
			height: 42rpx;
		}
	}

	.jian {
		width: 36rpx;
		height: 36rpx;
		border: 1px solid #2979ff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.jia {
		width: 36rpx;
		height: 36rpx;
		border: 1px solid #2979ff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.input {
		width: 48rpx;
		height: 36rpx;
		padding: 0 6rpx;
		text-align: center;
	}

	.caozuo {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.queren {
		width: 48%;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
		margin: 0 15px;
		border-radius: 44px;
		background: red;
	}

	.bBOX {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16rpx 0;
	}

	.quxiao {
		width: 48%;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
		margin: 0 15px;
		border-radius: 44px;
		background: #ddd;
	}

	.btnBox {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #fff;
	}

	.edite {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16rpx 0;
	}

	.tinajia {
		width: 88%;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
		margin: 0 15px;
		border-radius: 44px;
		background: linear-gradient(68deg, #ff7700, #9ade97);
	}

	.queren {
		width: 88%;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFFFFF;
		margin: 0 15px;
		border-radius: 44px;
		background: linear-gradient(68deg, #1eb481, #9ade97);
	}

	.eTitle {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 36rpx;
	}

	.card {
		position: fixed;
		bottom: 488rpx;
		right: 30rpx;
		width: 80rpx;
		height: 80rpx;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.list_bt_sm {
		// width: 33%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #000;
	}

	.list_bt_sm image {
		width: 30rpx;
		margin-right: 10rpx;
	}

	/deep/.u-safe-bottom {
		display: none;
	}
</style>